<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref, watch } from 'vue';
import { ArticleResData, Article } from '../types/index';

const props = defineProps<{
  activeId: number;
}>();

const list = ref<Article[]>([]);

watch(
  () => props.activeId,
  async () => {
    const res = await axios.request<ArticleResData>({
      method: 'GET',
      url: 'http://geek.itheima.net/v1_0/articles',
      params: {
        channel_id: 0,
        timestamp: Date.now(),
      },
    });
    list.value = res.data.data.results;
  },
  {
    immediate: true, // 第一次默认执行
  }
);

// onMounted(async () => {

// });
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="v in list" :key="v.art_id">
      <p class="title">
        {{ v.title }}
      </p>
      <img v-for="url of v.cover.images" class="img" :src="url" alt="" />
      <div class="info">
        <span>{{ v.aut_name }}</span>
        <span>{{ v.comm_count }}评论</span>
        <span>{{ v.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
